<template>
	<view class="personal-dynamics-wrap">
		<view class="header relative">
			<view class="top-block"></view>
			<view class="personal-title white text-center">
				我的动态
			</view>
			<view class="back-btn text-center" @click="handleBack">
				<text class="iconfontPT iconfanhui1"></text>
			</view>
			<view class="info-wrap bg-white">
				<image :src="data.portrait" class="avatar" />
				<view class="chat-btn" @click="handleChat" v-if="!isSelf">
					撩一撩
				</view>
				<view class="info">
					<view class="top">
						<text class="bold name">{{data.name}}</text>
						<view class="inline-block other">
							<text :class="{ 'iconfontPT gender': true, 'iconnansheng_1': isMan, 'iconnvsheng': isWoman }"></text>
							{{data.sex==1 ? "男" : "女"}}&nbsp;/&nbsp;{{data.city}}
						</view>
					</view>
					<view class="bottom">
						<text class="iconfontPT icongerenmiaoshu"></text>
						<text class="autograph">个人描述:&nbsp;&nbsp;{{data.autograph ? data.autograph : '暂无'}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="circle-chat-list">
				<view class="date bg-white">{{personalDynamics.date}}</view>
				<view v-if="personalDynamicList.length">
					<dynamicTpl @onShowActions="handleShowActions" v-for="(item, i) in personalDynamicList" :key="i" :isSelf='isSelf'
					 :dynamicDate="item" @likeStateChange="handleLikeStateChange" :index="i" :isMan="isMan" :isWoman="isMan"></dynamicTpl>
				</view>
				<no-data v-else />
			</view>
		</view>
		<view class="actions-wrap" v-if="showAction">
			<view class="mask" @click="handleHideActions"></view>
			<view class="actions-menu w100 text-center">
				<view class="item-wrap bg-white">
					<view class="item" @click="handleCancel">
						删除
					</view>
				</view>
				<view class="cancel bg-white" @click="handleHideActions">
					取消
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPersonalInfo,
		cancelCircleChat,
	} from '../../../apis/life-circle/index.js';
	import dynamicTpl from '../../components/life-circle/dynamic-tpl.vue'

	export default {
		data() {
			return {
				uid: 0,
				page: 1,
				data: {},
				load: true,
				deletId: '',
				isSelf: false,
				showAction: false,
				personalDynamicList: [],
				placeholder: '请输入好友备注',
			};
		},
		computed: {
			isMan() {
				return +this.data.sex === 1;
			},
			isWoman() {
				return +this.data.sex === 0;
			}
		},
		components: {
			dynamicTpl
		},
		onLoad(options) {
			this.uid = options.uid
		},
		onShow() {
			this.getPersonalInfo()
		},
		onReachBottom() {
			if (this.load) {
				this.load = false
				this.getPersonalInfo()
			}
		},
		methods: {
			handleCancel() {
				uni.showModal({
					title: '提示',
					content: '是否删除该条动态？',
					success: (res) => {
						if (res.confirm) {
							this.$loading.show()
							cancelCircleChat({
								id: this.deletId
							}).then(res => {
								this.$loading.hide()
								this.personalDynamicList = this.personalDynamicList.filter(item=>item.id !== this.deletId)
								this.handleHideActions()
							})
						}
					}
				})
			},
			handleHideActions() {
				this.showAction = false
			},
			handleShowActions(showAction, deletId) {
				this.showAction = showAction
				this.deletId = deletId
			},
			handleChat() {
				let params = {
					url: '/pages/life-circle/chat-box/index',
					conversationID: `C2C${ this.data.openid }_group`
				};

				this.$store.dispatch('tim/checkoutConversation', params)
			},
			getPersonalInfo() {
				const params = {
					uid: this.uid,
					page: this.page,
				}
				this.$loading.show()
				getPersonalInfo(params).then(res => {
					if (+res.code === 200) {
						res.data.member.openid == uni.getStorageSync('openId') && (this.isSelf = true)
						 
						this.data = res.data.member;
						this.personalDynamicList.push(...res.data.list);
						 
						if (res.data.list.length) {
							this.page = this.page + 1
							this.load = true
						} else {
							this.load = false
						}
						this.$loading.hide();
					}
				})
			},
			handleBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleLikeStateChange(i, isLike) {
				let likeNumber = this.personalDynamicList[i].fabulous

				if (isLike) {
					this.personalDynamicList[i].dz_state = 1
					this.personalDynamicList[i].fabulous = likeNumber + 1
				} else {
					this.personalDynamicList[i].dz_state = 0
					this.personalDynamicList[i].fabulous = likeNumber - 1
				}
			},
			handleLike(i) {
				this.personalDynamics.list[i].isLike = !this.personalDynamics.list[i].isLike
			},
			handleResetPlaceholder(i) {
				this.placeholder = i ? '' : '请输入好友备注'
			}
		}
	};
</script>

<style lang="less">
	.personal-dynamics-wrap {
		.header {
			overflow-x: hidden;
			padding-bottom: 35rpx;

			.personal-title {
				position: absolute;
				top: 110rpx;
				left: 50%;
				-webkit-transform: translate(-50%);
				transform: translate(-50%);
			}

			.back-btn {
				position: fixed;
				z-index: 111;
				width: 66rpx;
				height: 66rpx;
				line-height: 66rpx;
				top: 99rpx;
				left: 30rpx;

				.iconfontPT {
					color: #ffffff;
					font-size: 36rpx;
				}
			}

			.top-block {
				width: 1000rpx;
				height: 500rpx;
				background: linear-gradient(90deg,
					rgba(228, 24, 5, 1) 0%,
					rgba(253, 109, 95, 1) 100%);
				border-radius: 0 0 64% 64%;
				margin-left: -126rpx;
			}

			.info-wrap {
				height: 249rpx;
				width: 690rpx;
				border-radius: 20rpx;
				box-shadow: 0rpx 12rpx 21rpx 3rpx rgba(51, 51, 51, 0.13);
				padding: 33rpx;
				box-sizing: border-box;
				position: absolute;
				top: 255rpx;
				left: 50%;
				transform: translate(-50%);

				.chat-btn {
					position: absolute;
					right: 30rpx;
					top: 30rpx;
					font-size: 30rpx;
					color: #ffffff;
					background: #FD830E;
					border-radius: 10rpx;
					padding: 5rpx 30rpx;
				}

				.info {
					line-height: 55rpx;
					position: absolute;
					bottom: 20rpx;
					font-size: 24rpx;
					color: rgba(51, 51, 51, 1);

					.top {
						.name {
							font-size: 48rpx;
							color: rgba(51, 51, 51, 1);
							line-height: 34rpx;
						}

						.other {
							.gender {
								margin-right: 10rpx;
								font-size: 24rpx;

								&.iconnansheng_1 {
									color: #0681dd;
								}

								&.iconnvsheng {
									color: #ff5c91;
								}
							}

							margin-left: 30rpx;
						}
					}

					.bottom {
						.autograph {
							margin-left: 20rpx;
						}
					}
				}

				.avatar {
					width: 136rpx;
					height: 136rpx;
					border-radius: 100%;
					position: absolute;
					box-shadow: 0rpx 12rpx 21rpx 3rpx rgba(102, 102, 102, 0.28);
					top: -70rpx;
				}
			}
		}

		.body {
			.circle-chat-list {
				background: #f7f7f7ff;

				.date {
					padding: 15rpx 0rpx 0rpx 25rpx;
					font-size: 48rpx;
					box-sizing: border-box;
				}
			}
		}

		.actions-wrap {
			position: fixed;
			width: 100%;
			top: 0;
			height: 100%;

			.mask {
				position: relative;
				background: rgba(0, 0, 0, .2);
				width: 100%;
				height: 100%;
			}

			.actions-menu {
				position: absolute;
				bottom: 0;
				left: 0;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				background: #f8f8f8;

				.item-wrap {
					margin-bottom: 15rpx;
					padding: 30rpx 0rpx;
					border-radius: 20rpx 20rpx 0rpx 0rpx;
				}

				.cancel {
					padding: 30rpx 0rpx;
				}
			}
		}
	}
</style>
